<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>09_两对移入移出的区别</title>
        <style>
            .outer {
                width: 500px;
                height: 500px;
                background-color: red;
            }

            .inner {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">

            </div>
        </div>

        <script>
            var outer = document.querySelector('.outer');


            // over和out
            // 在红色的盒子中有一个绿色盒子  然后给红色的盒子绑定了一个移入事件
            // 移入红色盒子会显示移入  移出红色的盒子 会显示移出
            // 如果移入到绿色的盒子 会先移出红色的盒子  因为冒泡事件流的关系
            // 所以又冒泡到红色的盒子 所以显示移入
            // outer.onmouseover = function(){
            //     console.log('移入');
            // }

            // outer.onmouseout = function(){
            //     console.log('移出');
            // }


            // enter和leave不会发生冒泡 进而不会事件委派
            outer.onmouseenter = function(){
                console.log('移入');
            }

            outer.onmouseleave = function(){
                console.log('移出');
            }

        </script>
    </body>
</html>